<template>
  <div>
    <el-row>
      <el-button type="success" icon="circle-plus" @click="addBtn">添加</el-button>
      <!-- 批量操作 -->
    </el-row>
    <qa-table ref="tableRef" :action="table.action" :columns="table.columns" :query-form-param="queryForm" :pagination="false"
      :right-btns="['detail_auto', 'update', 'delete']" size="default" @current-change="currentChange"
      @update="updateBtn" @delete="deleteBtn"></qa-table>

    <qa-dialog :title="form.props.title" v-model="form.props.show" v-slot="slotProps">
      <qa-form v-model="form.data" :rules="form.props.rules" :columns="form.props.columns"
        mode="form"
        :closeDialog="slotProps.closeDialog" :labelWidth="100" :action="form.props.action"
        :formType="form.props.formType" @success="form.props.show = false; tableRef?.refresh()"></qa-form>
    </qa-dialog>
  </div>
</template>

<script setup lang="ts">
import qaTable from '@/components/qa-table.vue'
import qaDialog from '@/components/qa-dialog.vue';
import qaForm from '@/components/qa-form.vue';

const originalForms: any = {}; // 表单初始化数据

const tableRef = ref<InstanceType<typeof qaTable> | null>(null);
const table = ref({
  action: '/admin/system/sysMenu/systemMenu/getAll',
  columns: [
    {
      key: "title",
      title: "菜单名称",
      type: "text",
      align: "left",

    },
    {
      key: "menu_id",
      title: "菜单唯一标识",
      type: "text",
      align:"left"
    },
    {
      key: "component",
      title: "VUE路由地址",
      type: "text",
      align:"left"
    },
    {
      key: "sort",
      title: "排序",
      type: "text",
      align:"left"
    },
  ]
})


const defaultParentId = ref(null)
const currentChange = (row: any) => {
  console.log('选中项',row)
  defaultParentId.value = row.menu_id
}

const queryForm = ref({
  formData: {
  },
  columns: [

  ]
})


const form = ref({
  data: {
    parent_id:null,
    menu_id:""
  },
  props: {
    title: "",
    action: "",
    columns: [

      {
        key: "menu_id",
        title: "菜单唯一标识",
        type: "text",
      },
      {
        key: "title",
        title: "菜单名称",
        type: "text",
        align: "left",
      },
      {
        key: "icon",
        title: "图标",
        type: "icon",
        align: "left",
        tips:"请选择图标",
      },
      {
        key: "path",
        title: "VUE路由地址",
        type: "text",
      },
      {
        key: "component",
        title: "组件文件路径",
        type: "text",
        align: "left",
        tips:"格式：/src/..../*.vue"
      },
      {
        key: "sort",
        title: "排序",
        type: "text",
      },
      {
        action:"/admin/system/sysMenu/systemMenu/getAll",
        key: "parent_id",
        title: "父级菜单",
        type: "tree-select",
        tips:"父级菜单menu-id",
        props: { list:"rows", value:"menu_id", label:"title", children:"children" },
      }
    ],
    rules: {
      username: [{
        min: 5, max: 15,
        required: true,
        message: '长度在5到15个字符',
        trigger: 'blur'
      }]
    },
    formType: 'add' as 'add' | 'update',
    show: false
  }
})

originalForms['data'] = JSON.parse(JSON.stringify(form.value.data));


const addBtn = () => {
  form.value.data = { ...originalForms['data'] }
  form.value.data.parent_id = defaultParentId.value
  form.value.data.menu_id = defaultParentId.value ? defaultParentId.value + '-' : '';
  form.value.props.action = '/admin/system/sysMenu/systemMenu/add';
  form.value.props.formType = "add"
  form.value.props.title = '添加';
  form.value.props.show = true
}

const deleteBtn = (row: any, deleteFn: (params: { action: string, data: any }) => Promise<void>) => {
  deleteFn({
    action: '/admin/system/sysMenu/systemMenu/delete',
    data: {
      _id: row._id
    }
  })
}
const updateBtn = (row: any) => {
  form.value.data = row
  form.value.props.action = '/admin/system/sysMenu/systemMenu/update';
  form.value.props.formType = "update"
  form.value.props.title = '编辑';
  form.value.props.show = true
}

const search = () => {
  if (tableRef.value) {
    (tableRef.value as { Search: () => void }).Search();
  }
}
</script>

<style scoped></style>
